/*
 * @Author: luoqi
 * @Date: 2022-04-04 13:27:49
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-12 19:26:21
 * @Description: 
 */

import React,{ useState } from 'react';
import {  Button,Modal,Form, Input, Radio,Select,Upload, message } from 'antd';
import {  PlusOutlined, UploadOutlined } from '@ant-design/icons';
import axios from '../../utils/axios'
import qs from 'qs'
const { Option } = Select;


const Modifyadmin = (props) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [value, setValue] = React.useState(1);
    const [form1]=Form.useForm()
    let {username,phone,password,status,id}=props.data
    const showModal = () => {
      setIsModalVisible(true);
    };
  
    const handleOk = () => {
      form1.submit()
    };
  
    const handleCancel = () => {
      setIsModalVisible(false);
    };
    const onFinish = (values) => {
      console.log('Success:', values);
      let {username,password,phone,status}=values
      axios({
        url:'/admin/upsert',
        method:'post',
        data:qs.stringify({
          id:id,
          username:username,
          password,
          phone,
          status:status===0?false:true
        })
      }).then(res=>{
        console.log(res);
        if(res.code=='200'){
          props.setNum(2)
          setIsModalVisible(false);
        }
        
      })
    };
  
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
    };
    const onChange = e => {
      console.log('radio checked', e.target.value);
      setValue(e.target.value);
    };
    function handleChange(value) {
      console.log(`selected ${value}`);
    }
  return (
    <div>
      <Button type="primary" ghost  onClick={showModal}>修改</Button>
      <Modal title="修改管理员" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定"
            cancelText="取消">
        <Form
          name="basic"
          form={form1}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{username,phone,password,status:status?1:0}}
        >
          <Form.Item
            label="管理员用户名"
            name="username"
            rules={[{ required: true, message: '请输入用户昵称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="管理员手机号"
            name="phone"
            rules={[{ required: true, message: '请输入正确的用户手机号',pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="管理员密码"
            name="password"
            rules={[{ required: true, message: '请输入用户密码' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="管理员状态"
            name="status"
          >
            <Radio.Group onChange={onChange} value={value} >
              <Radio value={1}>可用</Radio>
              <Radio value={0}>不可用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default Modifyadmin;
